<template>
  <a-modal v-model:visible="visible" @cancel="handleCancel">
    <template #title> 编辑部门 </template>
    <div>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item field="department_name" label="部门名称">
          <a-input
            v-model="form.department_name"
            placeholder="请输入部门名称"
            allow-clear
            show-word-limit
            :max-length="20"
          />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button type="primary" @click="savedepartment">确定</a-button>
    </template>
  </a-modal>
</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { saveDepartment } from '@/api/department';
import { Message } from '@arco-design/web-vue';

const formRef = ref()
const savedepartment = () => {
    formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      const { data, code, message } = await saveDepartment(form);
      Message.success(message);
      if (code === 200) {
        visible.value = false;
        formRef.value.resetFields();
      }
    }
  });
}
const handleCancel = () => {
  visible.value = false;
};
const form = reactive({
  department_name: '',
});
const rules = {
  department_name: [
    {
      required: true,
      message: '请输入部门名称',
    },
  ],
};
const visible = ref(false);
// 打开对话框
const openDialog = () => {
  visible.value = true;
};
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
</style>